<!--
 * @Author: 李云峰 15272254578@163.com
 * @Date: 2022-05-24 18:08:24
 * @LastEditors: 李云峰 15272254578@163.com
 * @LastEditTime: 2022-05-24 18:43:51
 * @FilePath: \code代码\5月js课程文件夹\5月24日\03选项卡for.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 span {
        display: inline-block;
        width: 120px;
        height: 50px;
        background: #3e38ed;
        border: 1px solid blue;
        text-align: center;
        line-height: 50px;
        border-radius: 10px;
    }
    
    .box1 .jj {
        background: #8be833;
        color: #3e38ed;
    }
    
    .box2 img {
        /* width: 200px; */
        display: none;
    }
    
    .box2 .pic {
        display: block;
    }
</style>

<body>
    <div class="box1">
        <span class="jj">嘻嘻1</span>
        <span>嘻嘻2</span>
        <span>嘻嘻3</span>

    </div>
    <div class="box2">
        <img class="pic" src="./李云峰--H3C认证云计算工程师.png" alt="">
        <img src="./Taylor Swift.webp" alt="">
        <img src="./微信图片_20220517135444.jpg" alt="">
    </div>
    <script>
        // 1. 获取所有span标签的元素,获取所有img标签的元素
        // 1.1 获取span的标签元素
        // querySelectorAll 获取一组元素
        let sp = document.querySelectorAll('span')
            // 1.2 获取img 标签的元素
        let pc = document.querySelectorAll('img')

        // 2. 循环遍历所有标签,并注册鼠标移入事件
        // 2.1 循环遍历 用 foreach
        sp.forEach(function(ele, el) { //ele 代表所有元素 事件源；el 代表所有元素的索引
            // 2.3 并注册鼠标移入事件
            ele.addEventListener('mouseover', function() {


                // 4. 排除他们
                // 排除不需要的元素
                for (let i = 0; i < sp.length; i++) {
                    // 就是span里面的每一个
                    sp[i].classList.remove('jj');
                    pc[i].classList.remove('pic');

                }
                // 3. 给点的添加高亮
                // 3.1 给span的添加高亮
                ele.classList.add('jj');
                // 3.2 给图片添加高亮
                // el 代表所有元素的索引 获取到它一组的,
                pc[el].classList.add('pic');
            })


        })
    </script>
</body>

</html>

</html>